<template>
	<view :class="AppStyle">
		<!-- 顶部菜单 -->
		<view class="home-nav metaList" :style="'top:'+CustomBar+'px'">
			<scroll-view scroll-x class="bg-white nav " scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" :class="item.mid==TabCur?'text-blue cur':''" v-for="(item,index) in metaList"
					:key="index" @tap="tabSelect" :data-id="item.mid" v-if="item.parent==0">
					{{item.name}}
				</view>
			</scroll-view>
			<view class="goCategory" @tap="goCategory">
				<text class="cuIcon-more"></text>
			</view>
		</view>
		<!--  -->
		<view :style="[{ padding: 100 + 'rpx 10rpx 0rpx 10rpx'}]"></view>
		<block v-if="TabCur==0">
			<swiper class="screen-swiper" :class="false?'square-dot':'round-dot'" :indicator-dots="true"
				:circular="true" :autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index" @tap="toDetailInfo(item)">
					<view class="swiper-box">
						<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
						<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false"
							objectFit="cover" v-if="item.type=='video'"></video>
						<view class="swiper-text">
							<view class="swiper-title">
								{{item.title}}
							</view>
							<view class="swiper-intro">
								{{item.intro}}
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- <view class="index-sort grid col-4">
				<view class="index-sort-box">
					<waves itemClass="butclass">
						<view class="index-sort-main" @tap="toShop">
							<view class="index-sort-i" style="background: rgba(255,51,51, 0.2);">
								<text class="cuIcon-shopfill" style="color:  #ff3333;"></text>
							</view>
							<view class="index-sort-text">
								积分商城
							</view>
						</view>
					</waves>
				</view>
				<view class="index-sort-box">
					<waves itemClass="butclass">
						<view class="index-sort-main" @tap="toUsers">
							<view class="index-sort-i" style="background: rgba(170,85,255, 0.2);">
								<text class="cuIcon-peoplefill" style="color:  #aa55ff;"></text>
							</view>
							<view class="index-sort-text">
								用户列表
							</view>
						</view>
					</waves>
				</view>
			</view> -->
			<!--  热门话题 -->
			<view class="data-box">
				<view class="cu-bar bg-white margin-left">
					<view class="action data-box-title">
						<text class="cuIcon-titles text-rule"></text>热门话题
					</view>
					<view class="action more" @tap="toTopHotList()">
						<text>更多</text><text class="cuIcon-right"></text>
					</view>
				</view>
				<view class="topic grid col-2">
					<view class="topic-box" v-for="(item, index) in Topic" @tap="toTopDetail(item.id)"
						:key="index">
						<view class="topic-main">
							<image :src="item.imgurl" mode="aspectFill"></image>
							<view class="topic-text" v-if="item.type=='tag'">#{{item.name}}#</view>
							<view class="topic-text" v-else>{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<!--  广告 -->
		<view class="ads-banner" v-if="bannerAdsInfo!=null">
			<image :src="bannerAdsInfo.img" mode="widthFix" ></image>
		</view>
		<!--最新话题列表，底下改成滑动形式-->
		<view class="all-box" :style="TabCur!=0?'margin-top:0;':''">
			<view class="cu-bar bg-white" v-if="TabCur==0">
				<view class="action data-box-title margin-left">
					<text class="cuIcon-titles text-rule"></text>最新话题
				</view>
				<view class="action more" @tap='toNewContents()'>
					<text>查看更多</text><text class="cuIcon-right"></text>
				</view>
			</view>
			<block v-for="(item,index) in contentsList" :key="index">
				<articleItem :item="item"></articleItem>
			</block>

			<view class="load-more">
				<text>{{moreText}}</text>
			</view>
		</view>
		<view class="">
			<bottonNavBar :fixedBottom="true"></bottonNavBar>
		</view>
		<!--加载遮罩-->
		<view class="loading" v-if="isLoading==0">
			<view class="loading-main">
				<image src="../../static/loading.gif"></image>
			</view>
		</view>
		<!--加载遮罩结束-->
	</view>
</template>

<script>
	import waves from '@/components/waves.vue';
	import articleItem from '@/components/articleItem.vue';
	import bottonNavBar from "@/components/navbar/botton-nav-bar.vue";
	export default {
		components: {
			waves,
			articleItem,
			bottonNavBar
		},
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				NavBar: this.StatusBar + this.CustomBar,
				AppStyle: '',
				swiperList: [
					{"cid":257,"type":"image","url":"http://bbs.eyunapps.com/usr/uploads/2022/08/3152531146.png","title":"您赞成春节燃放烟花炮竹吗？",
				"intro":"春节是中国的传统节日，除了大家欢聚一堂，春节的年味更是需要烟花炮竹的点缀！"},
				{"cid":258,"type":"image","url":"https://eyunapp-1300649801.cos.ap-nanjing.myqcloud.com//img//2022/8/26/651a688a-0d9a-4693-bf32-9c78685640da.jpg",
				"title":"明星艺人该如何自律？",
				"intro":"明星丑闻最近越来越多，尤其小鲜肉相关丑闻跟过，我们应该如何面对这样的局面"}],
				contentsList: 
				[
					{
						"title": "测试不带图的话题",
						"isTop": 1,
						"markdown": 1,
						"content": "测试内容内容内容内容测试内容内容内容内容测试内容内容内容内容测试内容内容内容内容",
						"commentsNum": 4,
						"views": 46,
						"image": "",
						"created": 1673583060,
						"id": 232
					},
					{
						"title": "测试带图话题！",
						"isTop": 0,
						"content": "测试狄格儿内容哈哈哈哈啊Hass地方撒旦",
						"commentsNum": 3,
						"views": 686903,
						"image": "https://eyunapp-1300649801.cos.ap-nanjing.myqcloud.com//img//2022/8/27/e774daa9-2722-49b4-a1d1-6f8eb9823df9.JPG",
						"created": 1661534576,
						"id": 232
					},
					{
						"isAds": true,
						"url": "https://www.baidu.com",
						"title": "测试广告标题",
						"isTop": 0,
						"content": "测试狄格儿内容哈哈哈哈啊Hass地方撒旦",
						"commentsNum": 3,
						"views": 686903,
						"image": "https://eyunapp-1300649801.cos.ap-nanjing.myqcloud.com//img//2022/8/27/e774daa9-2722-49b4-a1d1-6f8eb9823df9.JPG",
						"created": 1661534576,
						"id": 232
					}
				],
				metaList: [{"mid":0,"name":"推荐","parent":0},{"count":5,"description":"节日","imgurl":"https://eyunapp-1300649801.cos.ap-nanjing.myqcloud.com//img//2022/8/26/b024d7a7-56c5-429c-b022-91f97a8b4b26.jpg","isrecommend":1,"mid":2,"name":"节日","orderKey":1,"parent":0,"slug":"节日","type":"category"},{"count":0,"description":"","imgurl":"https://eyunapp-1300649801.cos.ap-nanjing.myqcloud.com//img//2022/8/26/651a688a-0d9a-4693-bf32-9c78685640da.jpg","isrecommend":1,"mid":7,"name":"名人","orderKey":5,"parent":0,"slug":"名人","type":"category"},{"count":0,"description":"","imgurl":"https://eyunapp-1300649801.cos.ap-nanjing.myqcloud.com//img//2022/8/26/651a688a-0d9a-4693-bf32-9c78685640da.jpg","isrecommend":1,"mid":8,"name":"时政热议","orderKey":5,"parent":0,"slug":"时政热议","type":"category"}],
				Topic: [{"count":5,"description":"技术板块","imgurl":"https://eyunapp-1300649801.cos.ap-nanjing.myqcloud.com//img//2022/8/26/b024d7a7-56c5-429c-b022-91f97a8b4b26.jpg","isrecommend":1,"mid":2,"name":"技术板块","orderKey":1,"parent":0,"slug":"技术板块","type":"category"},{"count":0,"description":"","imgurl":"https://eyunapp-1300649801.cos.ap-nanjing.myqcloud.com//img//2022/8/26/651a688a-0d9a-4693-bf32-9c78685640da.jpg","isrecommend":1,"mid":7,"name":"二次元板块","orderKey":5,"parent":0,"slug":"色色板块","type":"category"}],
				TabCur: 0,
				scrollLeft: 0,
				page: 1,
				moreText: "加载更多",
				isLoad: 0,
				isLoading: 1,
				Update: 0,
				dataLoad: true,
				bannerAdsInfo: null,
				metaLists: {"msg":"","total":13,"code":1,"data":[{"count":5,"description":"技术板块","imgurl":"https://eyunapp-1300649801.cos.ap-nanjing.myqcloud.com//img//2022/8/26/b024d7a7-56c5-429c-b022-91f97a8b4b26.jpg","isrecommend":1,"mid":2,"name":"技术板块","orderKey":1,"parent":0,"slug":"技术板块","type":"category"},{"count":0,"description":"","imgurl":"https://eyunapp-1300649801.cos.ap-nanjing.myqcloud.com//img//2022/8/26/651a688a-0d9a-4693-bf32-9c78685640da.jpg","isrecommend":1,"mid":7,"name":"二次元板块","orderKey":5,"parent":0,"slug":"色色板块","type":"category"}],"count":2},
			}
		},
		onLoad() {
			this.loading();
			// #ifdef APP-PLUS || MP
			this.NavBar = this.CustomBar;
			// #endif

		},
		onReachBottom() {
			//触底后执行的方法，比如无限加载之类的
			if (this.isLoad == 0) {
				this.loadMore();
			}
		},
		methods: {
			//全部请求
			loading() {
				this.page = 1;
				this.getContentsList(false);
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.page = 1;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.dataLoad = false;
				this.getContentsList(false);
			},
			loadMore() {
				this.moreText = "正在加载中...";
				this.isLoad = 1;
				this.getContentsList(true);
			},
			getContentsList(isPage) {
				this.moreText = "没有更多文章了^-^";
			},
			// 点击顶部搜索框
			toSearch() {
				uni.navigateTo({
					url: '/pages/contents/search'
				});
			},
			toTopDetail(id) {
				var type = "meta";
				uni.navigateTo({
					url: '/pages/contents/contentlist?id=' + id
				});
			},
			toDetailInfo(data) {
				//需要根据类型判断跳转的页面
				uni.navigateTo({
					url: '/pages/contents/info?cid=' + data.cid + "&title=" + data.title
				});
			},
			toTopHotList() {
				uni.navigateTo({
				    url: '/pages/topic/topicHotList'
				});
			},
			toNewContents() {
				uni.navigateTo({
				    url: '/pages/topic/topicSearch'
				});
			},
			goCategory() {
				uni.navigateTo({
					url: '/pages/contents/allcategory'
				});
			},
			toStart() {
				this.isStart = true;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.margin-left {
		// padding: 30rpx 30rpx 20rpx 30rpx;
	}
</style>
